<template>
  <view class="editorWrap">
    <view class="toolbar" @tap="format">
      <view
        :class="formats.bold ? 'ql-active' : ''"
        class="iconfont icon-zitijiacu"
        data-name="bold"
      ></view>
      <view
        :class="formats.align === 'left' ? 'ql-active' : ''"
        class="iconfont icon-zuoduiqi"
        data-name="align"
        data-value="left"
      ></view>
      <view
        :class="formats.align === 'center' ? 'ql-active' : ''"
        class="iconfont icon-juzhongduiqi"
        data-name="align"
        data-value="center"
      ></view>
      <view
        :class="formats.align === 'right' ? 'ql-active' : ''"
        class="iconfont icon-youduiqi"
        data-name="align"
        data-value="right"
      ></view>
      <view
        :class="formats.fontFamily ? 'ql-active' : ''"
        class="iconfont icon-font"
        data-name="fontFamily"
        data-value="Pacifico"
      ></view>
      <view
        :class="formats.fontSize === '24px' ? 'ql-active' : ''"
        class="iconfont icon-font-size"
        data-name="fontSize"
        data-value="24px"
      ></view>
      <view class="iconfont icon-riqi" @tap="insertDate"></view>
      <view
        class="iconfont icon-wuxupailie"
        :class="formats.list ? 'ql-active' : ''"
        data-name="list"
        data-value="check"
      ></view>
      <view
        :class="formats.list === 'ordered' ? 'ql-active' : ''"
        class="iconfont icon-youxupailie"
        data-name="list"
        data-value="ordered"
      ></view>
      <view class="iconfont icon-tupian" @tap="insertImage"></view>
      <view
        :class="formats.header === 1 ? 'ql-active' : ''"
        class="iconfont icon-H-"
        data-name="header"
        :data-value="1"
      ></view>
    </view>
    <editor
      id="editor"
      class="ql-container"
      placeholder="开始输入..."
      showImgSize
      showImgToolbar
      showImgResize
      @statuschange="onStatusChange"
      @ready="onEditorReady"
      @input="content"
    ></editor>
  </view>
</template>

<script>
import { baseUrl } from '@/config/index'
export default {
  data () {
    return {
      formats: {}
    }
  },
  props: {
    editorContent: {
      type: String,
      default: ''
    }
  },
  watch: {
    editorContent () {
      this.onEditorReady()
    }
  },
  methods: {
    onEditorReady () {
      //#ifdef APP-PLUS || H5
      const this_ = uni
      //#endif
      //#ifdef MP-WEIXIN
      const this_ = this
      //#endif
      this_.createSelectorQuery().select('#editor').context((res) => {
        this.editorCtx = res.context
        const that = this
        this.editorCtx.setContents({
          html: that.editorContent,
          success (res) {
            console.log(res)
          }
        })
      }).exec()
    },
    onStatusChange (e) {
      const formats = e.detail
      this.formats = formats
    },
    format (e) {
      let {
        name,
        value
      } = e.target.dataset
      if (!name) return
      this.editorCtx.format(name, value)
    },
    insertDate () {
      const date = new Date()
      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.editorCtx.insertText({
        text: formatDate
      })
    },
    insertImage () {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const path = res.tempFilePaths
          uni.uploadFile({
            url: 'https://suntianjiao.cn/user/uploadImg',
            filePath: path[0],
            name: 'file',
            formData: {
              'file': 'test'
            },
            success: (res) => {
              const response = JSON.parse(res.data)
              if (response.code === 200) {
                var url = ''
                url = `${baseUrl}/${response.data}`
                this.editorCtx.insertImage({
                  src: url,
                  alt: '图像',
                  success: function () {
                    console.log('insert image success')
                  }
                })
              }
            }
          })
        }
      })
    },
    content (e) {
      const { html } = e.detail
      uni.$emit('giveContent', html)
    }
  }
}
</script>

<style lang="scss" scoped>
.editorWrap {
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  /* #ifdef APP-PLUS || H5 */
  border: 1px solid $u-success;
  /* #endif */
  .toolbar {
    width: 100%;
    height: 50px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(31, 182, 131, 0.4);
    padding: 0 10px;
    box-sizing: border-box;
  }
  .ql-container {
    width: 100%;
    padding: 10px;
    font-size: 24rpx;
    box-sizing: border-box;
  }
  .ql-active {
    color: rgb(31, 182, 131);
  }
}
</style>
